<template>
  <div class="itemmusictop">
    <img :src="playlist.coverImgUrl" class="bgimg" />
    <van-row class="itemmusictop-top">
      <van-col span="2" offset="1" @click="$router.go(-1)">
        <span class="iconfont" style="line-height: 0rem; padding: 0rem 0rem">&#xe65e;</span>
        <!-- style="line-height: 0rem; padding: 0rem 0rem;" -->
      </van-col>
      <van-col span="4">歌单</van-col>
      <van-col span="2" offset="12" @click="router.push({ path: '/searchfor' })">
        <span class="iconfont" style="line-height: 0rem; padding: 0rem 0rem">&#xe67a; </span>
      </van-col>
      <van-col span="1" offset="1">
        <span class="iconfont" style="line-height: 0rem; padding: 0rem 0rem">&#xe65f;</span>
      </van-col>
    </van-row>
    <van-row class="itemmusictop-center" justify="space-around">
      <van-col span="9">
        <img :src="playlist.coverImgUrl" />
      </van-col>
      <van-col span="14">
        <div class="itemmusictop-center-name">{{ playlist.name }}</div>
        <div class="itemmusictop-center-creator">
          <img :src="playlist.creator ? playlist.creator.avatarUrl : ''" />
          <div>{{ playlist.creator ? playlist.creator.nickname : "" }}</div>
        </div>
        <div class="itemmusictop-center-description">
          {{ playlist.description }}
          <!-- <div class="tips">{{ playlist.description }}</div> -->
        </div>
      </van-col>
    </van-row>
    <van-row class="itemmusictop-bottom" justify="space-around">
      <van-col span="4">
        <span class="iconfont" style="font-size: 0.8rem">&#xe80a;</span>
        <div class="itemmusictop-bottom-text">{{ playlist.commentCount }}</div>
      </van-col>
      <van-col span="4">
        <span class="iconfont" style="font-size: 0.8rem">&#xe7dc;</span>
        <div class="itemmusictop-bottom-text">{{ playlist.shareCount }}</div>
      </van-col>
      <van-col span="4">
        <span class="iconfont" style="font-size: 0.8rem">&#xe80b;</span>
        <div class="itemmusictop-bottom-text">下载</div>
      </van-col>
      <van-col span="4">
        <span class="iconfont" style="font-size: 0.8rem">&#xe7e1;</span>
        <div class="itemmusictop-bottom-text">多选</div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  setup(props) {
    const router = useRouter();
    return { router };
    //console.log(props)
  },
  props: ["playlist"],
};
</script>

<style lang="less" scoped>
.itemmusictop {
  width: 100%;
  position: relative;

  .bgimg {
    width: 100%;
    height: 7rem;
    position: fixed;
    filter: blur(1rem);
    z-index: -1;
  }

  .itemmusictop-top {
    font-size: 0.4rem;
    line-height: 0.8rem;
    height: 0.8rem;

    .iconfont {
      font-size: 0.4rem;
    }
  }

  .itemmusictop-center {
    height: 3.2rem;
    text-align: center;
    //margin: 0.3rem;

    img {
      width: 2.5rem;
      height: 3.2rem;
      border-radius: 0.2rem;
    }

    .itemmusictop-center-name {
      width: 4.1rem;
      height: 1rem;
      font-size: 0.4rem;
      text-align: left;
      overflow: hidden;
    }

    .itemmusictop-center-creator {
      width: 4.1rem;
      height: 1rem;
      margin: 0.2rem 0rem;
      line-height: 1rem;

      img {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        float: left;
        margin-right: 0.5rem;
      }

      div {
        width: 2.5rem;
        height: 1rem;
        float: left;
        font-size: 0.4rem;
        //line-height: 1rem;
        text-align: left;
        overflow: hidden;
      }
    }

    .itemmusictop-center-description {
      width: 4.1rem;
      height: 0.8rem;
      overflow: hidden;
      position: relative;
    }
  }

  .itemmusictop-bottom {
    height: 1.8rem;
    text-align: center;
    margin-top: 0.5rem;

    .itemmusictop-bottom-text {
      margin-top: 0.1rem;
      font-size: 0.35rem;
    }
  }
}
</style>
